import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // 所有的任务列表
    list: [],
    // input输入框的值
    inputValue: "",
    // 设置选中按钮名称
    activeName: "全部"
  },
  getters: {
    // 统计未完成的任务描述
    unDone(state) {
      let arr = state.list.filter(item => {
        return !item.done
      });
      return arr.length;
    },
    // 根据选中按钮名称过滤数组
    infoList(state) {
      switch (state.activeName) {
        case '全部':
          return state.list;
        case '未完成':
          return state.list.filter(item => {
            return !item.done
          });
        case '已完成':
          return state.list.filter(item => {
            return item.done
          });
      }
    }
  },
  mutations: {
    // 给任务列表数组赋值
    initList(state, list) {
      state.list = list;
    },
    // 清空input输入框的值
    clearInput(state) {
      state.inputValue = ''
    },
    // 监听输入框内容的改变并同步到input输入框值中
    changeValue(state, e) {
      state.inputValue = e.target.value;
    },
    // 添加事项按钮触发事件
    addNewDate(state) {
      state.list.push({
        id: state.list.length + 1,
        info: state.list.length + 1 + state.inputValue,
        done: false
      })
    },
    // 删除按钮触发事件
    delItem(state, id) {
      state.list = state.list.filter(item => {
        return item.id != id;
      })
    },
    // 复选框点击/取消触发事件
    changeCheckbox(state, { bool, checkboxId }) {
      let obj = state.list.find(item => {
        return item.id == checkboxId;
      });
      obj.done = bool
    },
    // 清除已完成的任务按钮触发事件
    clearFinishTask(state) {
      state.list = state.list.filter(item => {
        return !item.done
      });
    },
    // 全部/未完成/已完成按钮触发事件
    fillShift(state, selectName) {
      state.activeName = selectName;
    }
  },
  actions: {
    // 获取列表数据ajax请求
    getList(context) {
      axios.get('/list.json').then(res => {
        // 调用给任务列表赋值方法
        context.commit('initList', res.data)
      })
    }
  },
  modules: {
  }
})
